<template>
  <div style="padding: 10px">
    <d-select-tree
      v-model="selectValue"
      :data="options"
      node-key="value"
      :expand-on-click-node="false"
      check-strictly
      check-on-click-node
      multiple
      :props="{ label: 'name', value: 'id', children: 'childrenList', disabled: 'disabled' }"
      @node-click="handleChange"></d-select-tree>
    <p>selectValue值：{{ selectValue }}</p>
  </div>
</template>
<script setup lang="ts">
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'
  const selectValue = ref([])
  const handleChange = (val: string | number | boolean) => {
    ElMessage.success(`你点击了：${val}`)
  }
  const options = ref([
    {
      id: '1',
      name: 'Level one 1',
      disabled: true,
      childrenList: [
        {
          id: '1-1',
          name: 'Level two 1-1',
          childrenList: [
            {
              id: '1-1-1',
              name: 'Level three 1-1-1'
            }
          ]
        }
      ]
    },
    {
      id: '2',
      name: 'Level one 2',
      childrenList: [
        {
          id: '2-1',
          name: 'Level two 2-1',
          childrenList: [
            {
              id: '2-1-1',
              name: 'Level three 2-1-1'
            }
          ]
        },
        {
          id: '2-2',
          name: 'Level two 2-2',
          childrenList: [
            {
              id: '2-2-1',
              name: 'Level three 2-2-1'
            }
          ]
        }
      ]
    }
  ])
</script>
